<template>
	<view class="content">
		
		<view class="title-view">
			<view class="left">手机号/微信号</view>
			<view class="right">身份</view>
		</view>
		
		<view class="userInfo-view" v-for="(item, index) in userList" :key="index">
			<view class="phone-view">
				<view class="phone">{{item.wechat}}</view>
			</view>
			<view class="follow-view">{{item.typeName}}</view>
		</view>
		
		<view class="no-data-view" v-if="userList == null || userList.length == 0">暂无内容</view>
	</view>
</template>

<script>
	import http from "@/api/backend.js"
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				userList: [],
				isFocus: true
			}
		},
		onShow() {
	
		},
		onLoad() {
			this.queryList(1, 10)
		},
		onReachBottom() {
			if(this.pageNum * 10 < this.total) {
				this.pageNum++;
				this.queryList(this.pageNum, this.pageSize)
			}
		},
		onPullDownRefresh () {
			this.userList = []
			this.pageNum = 1
			this.pageSize = 10
			this.queryList(1, 10)
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.pageNum++;
			this.queryList(this.pageNum, this.pageSize, "", "")
		},
		methods: {
			queryList(pageNum, pageSize) {
				http.quertComplaints({pageNum: pageNum, pageSize: pageSize, status: '2'}).then((res) => {
					this.userList = this.userList.concat(res.data)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.userInfo-view {
		height: 42px;
		margin-top: 10px;
		border-bottom: 1px solid $uni-border-color;
		padding-bottom: 10px;
		padding-left: 40rpx;
		padding-right: 40rpx;
		
		.headImg-view {
			float: left;
			
			image {
				width: 40px;
				height: 40px;
				border-radius: 50px;
			}
		}
		
		.phone-view {
			float: left;
			margin-left: 8px;
			padding-top: 8px;
			padding-bottom: 10px;
			width: 66%;
			height: 22px;
			
			.phone {
				font-size: 16px;
				
				// 文字超出...
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
		
		.follow-view {
			float: right;
			font-size: 12px;
			color: #FFFFFF;
			padding-left: 6px;
			padding-right: 6px;
			padding-top: 2px;
			padding-bottom: 2px;
			border-radius: 4px;
			border: 1px solid $uni-border-color;
			background-color: #FFA726;
			margin-top: 10px;
			width: 36px;
			text-align: center;
		}
	}
	
	// 无数据
	.no-data-view {
		font-size: 16px;
		margin-top: 20px;
		color: $uni-text-color-grey;
		text-align: center;
	}
	
	.title-view {
		padding-left: 40rpx;
		padding-right: 76rpx;
		font-size: 16px;
		height: 60rpx;
		margin-top: 20rpx;
		border-bottom: 1px solid #FFA726;
		color: #888888;
		
		.left {
			float: left;
		}
		.right {
			float: right;
		}
	}
	
</style>